<template>
  <div>
    <h2><slot></slot></h2>

    <button @click="myIncrementAsync">Increment async</button>
    <button @click="myIncrementWithStepAsync(7)">
      Increment with step async
    </button>
    <button @click="incrementAsync">Increment async</button>
    <button @click="incrementWithStepAsync(7)">
      Increment with step async
    </button>
    <button @click="incrementAsync2">Increment async</button>
    <button @click="incrementWithStepAsync2(7)">
      Increment with step async
    </button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'Actions2',
  methods: {
    // actions → 组件的 methods
    myIncrementAsync() {
      this.$store.dispatch('incrementAsync')
    },
    myIncrementWithStepAsync(step) {
      this.$store.dispatch('incrementWithStepAsync', step)
    },

    // mapActions
    ...mapActions(['incrementAsync', 'incrementWithStepAsync']),

    // mapActions 重命名
    ...mapActions({
      incrementAsync2: 'incrementAsync',
      incrementWithStepAsync2: 'incrementWithStepAsync'
    })
  }
}
</script>
